<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-S-'>/**
</span> * @fileOverview  控件的视图层
 * @author yiminghe@gmail.com
 * copied by dxq613@gmail.com
 * @ignore
 */

var $ = require(&#39;jquery&#39;),
  win = window,
  Manager = require(&#39;./manage&#39;),
  UIBase = require(&#39;./uibase/uibase&#39;), //BUI.Component.UIBase,
  doc = document;

<span id='BUI-Component-View'>/**
</span> * 控件的视图层基类
 * @class BUI.Component.View
 * @protected
 * @extends BUI.Component.UIBase
 * @mixins BUI.Component.UIBase.TplView
 */
var View = UIBase.extend([UIBase.TplView], {

<span id='BUI-Component-View-method-getComponentCssClassWithState'>  /**
</span>   * Get all css class name to be applied to the root element of this component for given state.
   * the css class names are prefixed with component name.
   * @param {String} [state] This component&#39;s state info.
   */
  getComponentCssClassWithState: function(state) {
    var self = this,
      componentCls = self.get(&#39;ksComponentCss&#39;);
    state = state || &#39;&#39;;
    return self.getCssClassWithPrefix(componentCls.split(/\s+/).join(state + &#39; &#39;) + state);
  },

<span id='BUI-Component-View-method-getCssClassWithPrefix'>  /**
</span>   * Get full class name (with prefix) for current component
   * @param classes {String} class names without prefixCls. Separated by space.
   * @method
   * @return {String} class name with prefixCls
   * @private
   */
  getCssClassWithPrefix: Manager.getCssClassWithPrefix,

<span id='BUI-Component-View-method-getKeyEventTarget'>  /**
</span>   * Returns the dom element which is responsible for listening keyboard events.
   * @return {jQuery}
   */
  getKeyEventTarget: function() {
    return this.get(&#39;el&#39;);
  },
<span id='BUI-Component-View-method-getContentElement'>  /**
</span>   * Return the dom element into which child component to be rendered.
   * @return {jQuery}
   */
  getContentElement: function() {
    return this.get(&#39;contentEl&#39;) || this.get(&#39;el&#39;);
  },
<span id='BUI-Component-View-method-getStatusCls'>  /**
</span>   * 获取状态对应的css样式
   * @param  {String} name 状态名称 例如：hover,disabled等等
   * @return {String} 状态样式
   */
  getStatusCls: function(name) {
    var self = this,
      statusCls = self.get(&#39;statusCls&#39;),
      cls = statusCls[name];
    if (!cls) {
      cls = self.getComponentCssClassWithState(&#39;-&#39; + name);
    }
    return cls;
  },
<span id='BUI-Component-View-method-renderUI'>  /**
</span>   * 渲染控件
   * @protected
   */
  renderUI: function() {
    var self = this;

    // 新建的节点才需要摆放定位,不支持srcNode模式
    if (!self.get(&#39;srcNode&#39;)) {
      var render = self.get(&#39;render&#39;),
        el = self.get(&#39;el&#39;),
        renderBefore = self.get(&#39;elBefore&#39;);
      if (renderBefore) {
        el.insertBefore(renderBefore, undefined);
      } else if (render) {
        el.appendTo(render, undefined);
      } else {
        el.appendTo(doc.body, undefined);
      }
    }
  },
<span id='BUI-Component-View-method-createDom'>  /**
</span>   * 只负责建立节点，如果是 decorate 过来的，甚至内容会丢失
   * @protected
   * 通过 render 来重建原有的内容
   */
  createDom: function() {
    var self = this,
      contentEl = self.get(&#39;contentEl&#39;),
      el = self.get(&#39;el&#39;);
    if (!self.get(&#39;srcNode&#39;)) {

      el = $(&#39;&lt;&#39; + self.get(&#39;elTagName&#39;) + &#39;&gt;&#39;);

      if (contentEl) {
        el.append(contentEl);
      }

      self.setInternal(&#39;el&#39;, el);
    }

    el.addClass(self.getComponentCssClassWithState());
    if (!contentEl) {
      // 没取到,这里设下值, uiSet 时可以 set(&#39;content&#39;)  取到
      self.setInternal(&#39;contentEl&#39;, el);
    }
  },
<span id='BUI-Component-View-method-_uiSetHighlighted'>  /**
</span>   * 设置高亮显示
   * @protected
   */
  _uiSetHighlighted: function(v) {
    var self = this,
      componentCls = self.getStatusCls(&#39;hover&#39;),
      el = self.get(&#39;el&#39;);
    el[v ? &#39;addClass&#39; : &#39;removeClass&#39;](componentCls);
  },

<span id='BUI-Component-View-method-_uiSetDisabled'>  /**
</span>   * 设置禁用
   * @protected
   */
  _uiSetDisabled: function(v) {
    var self = this,
      componentCls = self.getStatusCls(&#39;disabled&#39;),
      el = self.get(&#39;el&#39;);
    el[v ? &#39;addClass&#39; : &#39;removeClass&#39;](componentCls)
      .attr(&#39;aria-disabled&#39;, v);

    //如果禁用控件时，处于hover状态，则清除
    if (v &amp;&amp; self.get(&#39;highlighted&#39;)) {
      self.set(&#39;highlighted&#39;, false);
    }

    if (self.get(&#39;focusable&#39;)) {
      //不能被 tab focus 到
      self.getKeyEventTarget().attr(&#39;tabIndex&#39;, v ? -1 : 0);
    }
  },
<span id='BUI-Component-View-method-_uiSetActive'>  /**
</span>   * 设置激活状态
   * @protected
   */
  _uiSetActive: function(v) {
    var self = this,
      componentCls = self.getStatusCls(&#39;active&#39;);
    self.get(&#39;el&#39;)[v ? &#39;addClass&#39; : &#39;removeClass&#39;](componentCls)
      .attr(&#39;aria-pressed&#39;, !!v);
  },
<span id='BUI-Component-View-method-_uiSetFocused'>  /**
</span>   * 设置获得焦点
   * @protected
   */
  _uiSetFocused: function(v) {
    var self = this,
      el = self.get(&#39;el&#39;),
      componentCls = self.getStatusCls(&#39;focused&#39;);
    el[v ? &#39;addClass&#39; : &#39;removeClass&#39;](componentCls);
  },
<span id='BUI-Component-View-method-_uiSetElAttrs'>  /**
</span>   * 设置控件最外层DOM的属性
   * @protected
   */
  _uiSetElAttrs: function(attrs) {
    this.get(&#39;el&#39;).attr(attrs);
  },
<span id='BUI-Component-View-method-_uiSetElCls'>  /**
</span>   * 设置应用到控件最外层DOM的css class
   * @protected
   */
  _uiSetElCls: function(cls) {
    this.get(&#39;el&#39;).addClass(cls);
  },
<span id='BUI-Component-View-method-_uiSetElStyle'>  /**
</span>   * 设置应用到控件最外层DOM的css style
   * @protected
   */
  _uiSetElStyle: function(style) {
    this.get(&#39;el&#39;).css(style);
  },
  //设置role
  _uiSetRole: function(role) {
    if (role) {
      this.get(&#39;el&#39;).attr(&#39;role&#39;, role);
    }
  },
<span id='BUI-Component-View-method-_uiSetWidth'>  /**
</span>   * 设置应用到控件宽度
   * @protected
   */
  _uiSetWidth: function(w) {
    this.get(&#39;el&#39;).width(w);
  },
<span id='BUI-Component-View-method-_uiSetHeight'>  /**
</span>   * 设置应用到控件高度
   * @protected
   */
  _uiSetHeight: function(h) {
    var self = this;
    self.get(&#39;el&#39;).height(h);
  },
<span id='BUI-Component-View-method-_uiSetContent'>  /**
</span>   * 设置应用到控件的内容
   * @protected
   */
  _uiSetContent: function(c) {
    var self = this,
      el;
    // srcNode 时不重新渲染 content
    // 防止内部有改变，而 content 则是老的 html 内容
    if (self.get(&#39;srcNode&#39;) &amp;&amp; !self.get(&#39;rendered&#39;)) {} else {
      el = self.get(&#39;contentEl&#39;);
      if (typeof c == &#39;string&#39;) {
        el.html(c);
      } else if (c) {
        el.empty().append(c);
      }
    }
  },
<span id='BUI-Component-View-method-_uiSetVisible'>  /**
</span>   * 设置应用到控件是否可见
   * @protected
   */
  _uiSetVisible: function(isVisible) {
    var self = this,
      el = self.get(&#39;el&#39;),
      visibleMode = self.get(&#39;visibleMode&#39;);
    if (visibleMode === &#39;visibility&#39;) {
      el.css(&#39;visibility&#39;, isVisible ? &#39;visible&#39; : &#39;hidden&#39;);
    } else {
      el.css(&#39;display&#39;, isVisible ? &#39;&#39; : &#39;none&#39;);
    }
  },
  set: function(name, value) {
    var _self = this,
      attr = _self.__attrs[name],
      ev,
      ucName,
      m;

    if (!attr || !_self.get(&#39;binded&#39;)) { //未初始化view或者没用定义属性
      View.superclass.set.call(this, name, value);
      return _self;
    }

    var prevVal = View.superclass.get.call(this, name);

    //如果未改变值不进行修改
    if (!$.isPlainObject(value) &amp;&amp; !BUI.isArray(value) &amp;&amp; prevVal === value) {
      return _self;
    }
    View.superclass.set.call(this, name, value);

    value = _self.__attrVals[name];
    ev = {
      attrName: name,
      prevVal: prevVal,
      newVal: value
    };
    ucName = BUI.ucfirst(name);
    m = &#39;_uiSet&#39; + ucName;
    if (_self[m]) {
      _self[m](value, ev);
    }

    return _self;

  },
<span id='BUI-Component-View-method-destructor'>  /**
</span>   * 析构函数
   * @protected
   */
  destructor: function() {
    var el = this.get(&#39;el&#39;);
    if (el) {
      el.remove();
    }
  }
}, {
  xclass: &#39;view&#39;,
  priority: 0
});


View.ATTRS = {
<span id='BUI-Component-View-property-el'>  /**
</span>   * 控件根节点
   * @readOnly
   * see {@link BUI.Component.Controller#property-el}
   */
  el: {
<span id='BUI-Component-View-method-setter'>    /**
</span>     * @private
     */
    setter: function(v) {
      return $(v);
    }
  },

<span id='BUI-Component-View-property-elCls'>  /**
</span>   * 控件根节点样式
   * see {@link BUI.Component.Controller#property-elCls}
   */
  elCls: {},
<span id='BUI-Component-View-property-elStyle'>  /**
</span>   * 控件根节点样式属性
   * see {@link BUI.Component.Controller#property-elStyle}
   */
  elStyle: {},
<span id='BUI-Component-View-property-role'>  /**
</span>   * ARIA 标准中的role
   * @type {String}
   */
  role: {

  },
<span id='BUI-Component-View-property-width'>  /**
</span>   * 控件宽度
   * see {@link BUI.Component.Controller#property-width}
   */
  width: {},
<span id='BUI-Component-View-property-height'>  /**
</span>   * 控件高度
   * see {@link BUI.Component.Controller#property-height}
   */
  height: {},
<span id='BUI-Component-View-property-statusCls'>  /**
</span>   * 状态相关的样式,默认情况下会使用 前缀名 + xclass + &#39;-&#39; + 状态名
   * see {@link BUI.Component.Controller#property-statusCls}
   * @type {Object}
   */
  statusCls: {
    value: {}
  },
<span id='BUI-Component-View-property-elTagName'>  /**
</span>   * 控件根节点使用的标签
   * @type {String}
   */
  elTagName: {
    // 生成标签名字
    value: &#39;div&#39;
  },
<span id='global-property-elAttrs'>  /**
</span>   * 控件根节点属性
   * see {@link BUI.Component.Controller#property-elAttrs}
   * @ignore
   */
  elAttrs: {},
<span id='BUI-Component-View-property-content'>  /**
</span>   * 控件内容，html,文本等
   * see {@link BUI.Component.Controller#property-content}
   */
  content: {},
<span id='BUI-Component-View-property-elBefore'>  /**
</span>   * 控件插入到指定元素前
   * see {@link BUI.Component.Controller#property-tpl}
   */
  elBefore: {
    // better named to renderBefore, too late !
  },
<span id='global-property-render'>  /**
</span>   * 控件在指定元素内部渲染
   * see {@link BUI.Component.Controller#property-render}
   * @ignore
   */
  render: {},
<span id='BUI-Component-View-property-visible'>  /**
</span>   * 是否可见
   * see {@link BUI.Component.Controller#property-visible}
   */
  visible: {
    value: true
  },
<span id='BUI-Component-View-property-visibleMode'>  /**
</span>   * 可视模式
   * see {@link BUI.Component.Controller#property-visibleMode}
   */
  visibleMode: {
    value: &#39;display&#39;
  },
<span id='BUI-Component-View-property-cachePosition'>  /**
</span>   * @private
   * 缓存隐藏时的位置，对应visibleMode = &#39;visiblity&#39; 的场景
   * @type {Object}
   */
  cachePosition: {

  },
<span id='BUI-Component-View-property-contentEl'>  /**
</span>   * content 设置的内容节点,默认根节点
   * @type {jQuery}
   * @default  el
   */
  contentEl: {
    valueFn: function() {
      return this.get(&#39;el&#39;);
    }
  },
<span id='BUI-Component-View-property-prefixCls'>  /**
</span>   * 样式前缀
   * see {@link BUI.Component.Controller#property-prefixCls}
   */
  prefixCls: {
    value: BUI.prefix
  },
<span id='BUI-Component-View-property-focusable'>  /**
</span>   * 可以获取焦点
   * @protected
   * see {@link BUI.Component.Controller#property-focusable}
   */
  focusable: {
    value: true
  },
<span id='BUI-Component-View-property-focused'>  /**
</span>   * 获取焦点
   * see {@link BUI.Component.Controller#property-focused}
   */
  focused: {},
<span id='BUI-Component-View-property-active'>  /**
</span>   * 激活
   * see {@link BUI.Component.Controller#property-active}
   */
  active: {},
<span id='BUI-Component-View-property-disabled'>  /**
</span>   * 禁用
   * see {@link BUI.Component.Controller#property-disabled}
   */
  disabled: {},
<span id='BUI-Component-View-property-highlighted'>  /**
</span>   * 高亮显示
   * see {@link BUI.Component.Controller#property-highlighted}
   */
  highlighted: {}
};

module.exports = View;
</pre>
</body>
</html>
